<template>
  <Header :showArrow="true" :showLogout="false"></Header>
  <div class="main">
    <div class="top">
      <div class="img">
        <img :src="MovieData.image" alt="" />
      </div>
      <div class="text">
        <div class="title">{{ MovieData.name }}</div>
        <div class="detail">{{ MovieData.small_tags }}</div>
      </div>
    </div>
    <div class="score">
      <div class="text">
        豆瓣评分:<span>{{ MovieData.score ? MovieData.score : "暂无" }}</span>
      </div>
      <van-rate
        readonly
        size="26"
        color="rgb(255,210,30)"
        :allow-half="true"
        v-model="MovieData.hscore"
      />
    </div>
    <div class="rate">
      <div class="text" v-if="value">您已对该电影做出评价！</div>
      <div class="text" v-else>您已看过？打个分吧！</div>
      <van-rate
        size="26"
        color="rgb(255,210,30)"
        :allow-half="true"
        v-model="value"
      />
      <span>{{ value * 2 }}</span>
      <van-button type="default" round @click="submit(value)">提交</van-button>
    </div>
    <div class="comment">
      <div
        class="usercomment"
        v-for="(i, index) in MovieData.comment"
        :key="index"
      >
        <div class="content">{{ MovieData.comment[index].content }}</div>
        <div class="username">--{{ MovieData.comment[index].username }}</div>
      </div>
    </div>
    <div class="input">
      <van-cell-group>
        <van-field
          v-model="submitvalue"
          :clearable="true"
          center
          placeholder="说点儿什么吧！"
        >
        </van-field>
      </van-cell-group>
      <van-button type="default" @click="submitComment(submitvalue)"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import Header from "../../components/Header.vue";
import { useRoute } from "vue-router";
import { onMounted } from "@vue/runtime-core";
import { axios2 } from "../../request/api";
import { Toast } from "vant";
export default {
  name: "MovieDetail",
  components: { Header },
  setup() {
    const route = useRoute();
    let data = reactive({
      submitvalue: "",
      value: 0,
      index: route.query.index,
      showDou: route.query.showDou,
      MovieData: [
        {
          id: 1,
          image: "",
          name: "",
          score: 0,
        },
      ],
    });
    let shouDouNum = Number(data.showDou);
    let url = shouDouNum ? 2 : "";
    let url2 = data.index - 1 + 2;
    // 资源数据：详情页针对性请求数据
    const getMovie = () => axios2.get("/hotmovie" + url + "/" + url2);
    const getMovie2 = async () => {
      const res = await getMovie();
      console.log("-----当前页面数据-----");
      console.log(res.data);
      data.MovieData = res.data;
    };

    // 评分数据：请求用户评分信息，再初始化页面，如果shouDouNum为0则是hotmovie，如果是1则是hotmovie2
    let user = JSON.parse(localStorage.user);
    const getRate = () => axios2.get("/users/" + user.id); //请求到当前用户的信息
    const getRate2 = async () => {
      const res = await getRate();
      console.log("----用户信息-----");
      user = res.data;
      console.log(user);
      if (shouDouNum === 0) {
        // 更改当前页面评分
        data.value = user.userrate[0].hotmovie[data.index].rate;
        console.log("-------用户评分-----");
        console.log(data.value);
      } else if (shouDouNum === 1) {
        // 更改当前页面评分
        data.value = user.userrate[1].hotmovie2[data.index].rate;
        console.log("--------用户评分-------");
        console.log(data.value);
      }
    };

    // 定义提交评分事件
    const submit = (value) => {
      if (shouDouNum === 0) {
        // 更改userrate数据
        user.userrate[0].hotmovie[data.index].rate = value;
        console.log("-------提交更新的用户评分-----");
        console.log(user.userrate[0].hotmovie[data.index].rate);
        // 向后端发送更新请求
        axios2({
          method: "PUT",
          url: "/users/" + user.id,
          data: user,
        }).then((response) => {
          console.log(response.data);
          Toast("提交成功！");
        });
      } else if (shouDouNum === 1) {
        // 更改userrate数据
        user.userrate[1].hotmovie2[data.index].rate = value;
        console.log("--------提交更新的用户评分-------");
        console.log(user.userrate[1].hotmovie2[data.index].rate);
        // 向后端发送更新请求
        axios2({
          method: "PUT",
          url: "/users/" + user.id,
          data: user,
        }).then((response) => {
          console.log(response.data);
          Toast("提交成功！");
        });
      }
    };

    // 定义提交评论事件
    const submitComment = (submitvalue) => {
      if (submitvalue) {
        if (shouDouNum === 0) {
          // 将评论和用户名暂存一下
          let obj = {
            username: user.username,
            content: submitvalue,
          };
          // 更改数据
          let comment = Array.from(data.MovieData.comment);
          console.log("-------用户评论提交！更新后数据为-----");
          comment.unshift(obj);
          data.MovieData.comment = comment;
          console.log(data.MovieData.comment);
          // 清空一下输入框
          data.submitvalue = "";
          // 向后端发送更新请求
          axios2({
            method: "PUT",
            url: "/hotmovie" + url + "/" + url2,
            data: data.MovieData,
          }).then((response) => {
            console.log("--------后端评论数据更新成功--------");
            console.log(response.data);
            Toast("评论成功！");
          });
        } else if (shouDouNum === 1) {
          // 将评论和用户名暂存一下
          let obj = {
            username: user.username,
            content: submitvalue,
          };
          // 更改数据
          let comment = Array.from(data.MovieData.comment);
          console.log("-------用户评论提交！更新后数据为-----");
          comment.unshift(obj);
          data.MovieData.comment = comment;
          console.log(data.MovieData.comment);
          // 清空一下输入框
          data.submitvalue = "";
          // 向后端发送更新请求
          axios2({
            method: "PUT",
            url: "/hotmovie" + url + "/" + url2,
            data: data.MovieData,
          }).then((response) => {
            console.log("--------后端评论数据更新成功--------");
            console.log(response.data);
            Toast("评论成功！");
          });
        }
      } else {
        Toast("输入不能为空！");
      }
    };
    // 页面初始化
    onMounted(() => {
      getMovie2();
      getRate2();
    });
    return {
      ...toRefs(data),
      user,
      submit,
      submitComment,
    };
  },
};
</script>

<style lang="less" scoped>
.main {
  background: linear-gradient(to right, rgb(160, 155, 137), rgb(104, 95, 65));
  min-height: 900px;
  display: flex;
  flex-flow: column;
  .top {
    height: 160px;
    padding-top: 10px;
    display: flex;
    margin-top: 20px;
    .img {
      height: 140px;
      width: 100px;
      margin-left: 10px;
      border-radius: 5px;
      box-shadow: 0 0 2px #888;
      margin-right: 20px;
      img {
        height: 140px;
        width: 100px;
        box-shadow: 0 0 2px #888;
        border-radius: 5px;
      }
    }
    .text {
      display: flex;
      flex-flow: column;
      justify-content: center;
      flex: 1;
      .title {
        color: rgba(255, 255, 255, 0.87);
        height: 80px;
        line-height: 30px;
        font-size: 30px;
      }
      .detail {
        color: rgb(224, 217, 217);
        height: 80px;
        font-size: 14px;
      }
    }
  }
  .score {
    width: 320px;
    height: 160px;
    background-color: rgb(129, 123, 123);
    margin: 10px auto;
    border-radius: 10px;
    .text {
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 26px;
      color: rgba(0, 0, 0, 0.507);
    }
    .van-rate {
      margin-left: 82px;
    }
  }
  .rate {
    color: rgba(255, 255, 255, 0.678);
    height: 92px;
    position: relative;
    .text {
      font-size: 24px;
      margin-bottom: 10px;
    }
    span {
      font-size: 30px;
      margin-left: 20px;
    }
    .van-button {
      position: absolute;
      left: 270px;
      top: 44px;
      background-color: rgb(129, 123, 123);
      border: 0;
      font-size: 20px;
      color: rgba(255, 255, 255, 0.589);
      width: 72px;
      height: 44px;
    }
  }
  .comment {
    .usercomment {
      font-size: 20px;
      width: 320px;
      background-color: rgba(121, 91, 91, 0.301);
      border-radius: 10px;
      margin: 0 auto;
      color: rgba(255, 255, 255, 0.596);
      margin-top: 20px;
      &:last-child {
        margin-bottom: 80px;
      }
      .content {
        line-height: 26px;
      }
      .username {
        float: right;
        overflow: hidden;
      }
    }
  }
  .input {
    position: fixed;
    height: 44px;
    width: 100%;
    bottom: 0;
    padding: 0;
    display: flex;
    .van-cell-group {
      border-radius: 10px;
      width: 330px;
    }
  }
}
</style>